<template>
  <view class="moveScore">
    <view v-if="!(tablelist && tablelist.length)" class="page_dcenter_null">
      <img class="page_dcenter_null_img" src="../../../static/img_null_bookbuilding.png" />
      <view>暂无记录</view>
    </view>
    <div v-else>
      <div class="move-top">
      <div :class="item == '日期'? 'move_top_li bigFlex':'move_top_li'" v-for="(item, index) in itemslist" :key="index">{{item}}</div>
    </div>
    
    <scroll-view scroll-y class="pages">
      <div class="pagesItm" v-for="(item, index) in tablelist" :key="index">
        <div class="pagesItm_itm bigFlex">
          <div class="pagesItm_itm_center">{{item.beginTime}}</div>
        </div>
        <div class="pagesItm_itm">
          <div class="pagesItm_itm_center">{{item.morningTotcNum ? item.morningTotcNum:'/'}}</div>
        </div>
        <div class="pagesItm_itm">
          <div class="pagesItm_itm_center">{{item.noonTotcNum? item.noonTotcNum:'/'}}</div>
        </div>
        <div class="pagesItm_itm">
          <div class="pagesItm_itm_center">{{item.nightTotcNum? item.nightTotcNum:'/'}}</div>
        </div>
        <div class="pagesItm_itm">
          <div class="pagesItm_itm_center">{{item.totcNum? item.totcNum:'/'}}</div>
        </div>
      </div>
    </scroll-view>
    <div class="tableIcon">
      <img @click="toTips" class="tableIcon_img" src="../../../static/btn_taidongxiaozhishi.png" />
    </div>
    </div>
  </view>
</template>
<script>
export default {
  data() {
    return {
      tablelist: [],
      itemslist: ["日期", "早1h", "中1h", "晚1h",'12h'],
    };
  },
  mounted() {
    var _this = this;
    _this.getList();
  },
  methods: {
    getList() {
      var data = {
        monitorTypeId: '316255958634606592'
      }
      var _this = this;
            _this.$ajaxs
                .get("/mobile/v1/monitor/getMoveCount", data)
                .then((res) => {
                    if (res.status == 200) {
                        _this.tablelist = res.content;
                    } else {
                        uni.showToast({
                            title: "请检查网络~",
                            icon: "none",
                        });
                    }
                })
                .catch((err) => reject(err));
    },
    toTips() {
      uni.navigateTo({
        url: "./fetalMoveTips",
        animationType: "pop-in",
        animationDuration: 200,
      });
    },
  },
};
</script>
<style scoped lang="scss">
.moveScore {
  height: 100vh;
  padding-top: 44px;
  margin-top: -44px;
  background: #f8f8f8;
  .page_dcenter_null {
    padding-top: 180upx;
    text-align: center;
    .page_dcenter_null_img {
      height: 180upx;
      width: 162upx;
    }
  }
  .bigFlex{
    -ms-flex: 1.5 !important;
      flex: 1.5 !important;
  }
  .move-top {
    display: -webkit-box;
    display: -webkit-flex;
    display: flex;
    text-align: center;
    background: #f8f8f8;
    font-size: 28upx;
    border-top: 2upx solid #ddd;
    .move_top_li {
      width: 0;
      flex-wrap: wrap;
      -webkit-wrap:wrap;
      padding: 0px 16upx;
      -webkit-box-flex: 1;
      -ms-flex: 1;
      flex: 1;
      align-items: center;
      justify-content: center;
      vertical-align: middle;
      height: 90upx;
      line-height: 90upx;
      color: #666;
    }
  }
  .pages {
    height: calc(100% - 90upx);
    .pagesItm {
      display: -webkit-box;
      display: -webkit-flex;
      display: flex;
      text-align: center;
      background: #fff;
      font-size: 28upx;
      border-bottom: 2upx solid #ddd;
      .pagesItm_itm {
        width: 0;
        padding: 0px 16upx;
        -webkit-box-flex: 1;
        -ms-flex: 1;
        flex: 1;
        align-items: center;
        justify-content: center;
        vertical-align: middle;
        height: 140upx;
        color: #666;
        .pagesItm_itm_center {
          width: 100%;
          position: relative;
          top: 50%;
          transform: translateY(-50%);
        }
      }
    }
  }
  .tableIcon {
    width: 118upx;
    height: 118upx;
    position: absolute;
    bottom: 20upx;
    right: 55upx;
    .tableIcon_img {
      width: 100%;
      height: 100%;
    }
  }
}
</style>